<template>
    <van-popup v-model="showSelect" :position="position" :close-on-click-overlay="false" :overlay="false">
        <div class="select">
            <p class="title">交易时间</p>
            <button :class="{tag: 1, active: activeChoose === '一天'}" @click="choose('一天')">一天</button>
            <button :class="{tag: 1, active: activeChoose === '三天'}" @click="choose('三天')">三天</button>
            <button :class="{tag: 1, active: activeChoose === '七天'}" @click="choose('七天')">七天</button>
            <!--筛选-->
            <p class="title2">选择起止时间 <span class="label">最长可查找时间跨度6个月的交易</span></p>
            <div class="pick">
                <div class="pick-item" @click="toPick(0)">
                    <p>{{ startText }}</p>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevronright"></use>
                    </svg>
                </div>
                <div class="pick-item" @click="toPick(1)">
                    <p>{{ endText }}</p>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevronright"></use>
                    </svg>
                </div>
            </div>
            <div class="btn-container">
                <button class="btn" @click="hide">取消</button>
                <button class="btn" @click="onConfirm">确定</button>
            </div>

            <van-popup v-model="showStartPicker" position="bottom" :lock-scroll="false">
                <van-datetime-picker
                        v-model="startDate"
                        type="date"
                        :max-date="new Date()"
                        @confirm="confirmStartDate"
                        @cancel="showStartPicker = false"
                ></van-datetime-picker>
            </van-popup>
            <van-popup v-model="showEndPicker" position="bottom" :lock-scroll="true">
                <van-datetime-picker v-model="endDate" type="date" :max-date="new Date()" @confirm="confirmEndDate"
                                     @cancel="showEndPicker = false"></van-datetime-picker>
            </van-popup>
        </div>
    </van-popup>
</template>

<script>


    import dayjs from 'dayjs';
    const FMT = 'YYYY-MM-DD HH:mm:ss';
    const FMT2 = 'YYYY-MM-DD 00:00:00';
    const FMT3 = 'YYYY-MM-DD';
    // const FMT = 'YYYY-MM-DD HH:mm:ss';

    export default {
        /*筛选组件*/
        name: 'date-select',
        components: {},
        data() {
            return {
                showSelect: false,
                startDate: '',
                endDate: '',
                showStartPicker: false,
                showEndPicker: false,
                // hasPicked: false,
                activeChoose: '本月',
                activeMap: {
                    一天: [
                        dayjs().startOf('day').format(FMT),
                        dayjs().format(FMT)],
                    三天: [
                        dayjs().subtract(2, 'day').format(FMT2),
                        dayjs().format(FMT)
                    ],
                    七天: [
                        dayjs()
                            .subtract(6, 'day')
                            .format(FMT2),
                        dayjs().format(FMT)
                    ]
                }
            };
        },
        props: {
            position: {
                type: String,
                default: 'right'
            }
            // activeChoose: {
            //     type: String,
            //     default: '今日'
            // }
        },
        computed: {
            startText() {
                return dayjs(this.startDate).format(FMT3) || '开始日期';
            },
            endText() {
                return dayjs(this.endDate).format(FMT3) || '结束日期';
            }
        },
        mounted() {
            this.activeChoose = '一天';
            this.startDate = new Date(this.activeMap[this.activeChoose][0]);
            this.endDate = new Date(this.activeMap[this.activeChoose][1]);
        },
        methods: {
            choose(type) {
                this.activeChoose = type;
                this.onConfirm();
            },
            show() {
                this.showSelect = true;
            },
            hide() {
                this.initDateMth(); // 更新最新时间
                this.showSelect = false;
            },
            toPick(index) {
                this.activeChoose = '';
                if (index == 0) {
                    this.showStartPicker = true;
                } else {
                    this.showEndPicker = true;
                }
            },
            confirmStartDate(data) {
                // this.hasPicked = true;
                this.showStartPicker = false;
                this.startDate = data;
            },
            confirmEndDate(data) {
                // this.hasPicked = true;
                this.showEndPicker = false;
                this.endDate = data;
            },
            onConfirm() {
                this.initDateMth(); // 更新最新时间
                if (this.activeChoose) {
                    this.$emit('selectDone', this.activeMap[this.activeChoose], this.activeChoose);
                } else {
                    let start = dayjs(this.startDate).format(FMT);
                    let end1 = dayjs(this.endDate).format('YYYY-MM-DD');
                    let end = dayjs(this.endDate.setDate(this.endDate.getDate() + 1)).format(FMT);
                    let start1 = dayjs(this.startDate).format('YYYY-MM-DD');
                    this.$emit('selectDone', [start, end], `${start1}--${end1}`);
                }
                this.hide();
            },
            initDateMth() {
                //    更新当前时间
                this.activeMap = {
                    一天: [
                        dayjs().startOf('day').format(FMT),
                        dayjs().format(FMT)],
                    三天: [
                        dayjs().subtract(2, 'day').format(FMT2),
                        dayjs().format(FMT)
                    ],
                    七天: [
                        dayjs()
                            .subtract(6, 'day')
                            .format(FMT2),
                        dayjs().format(FMT)
                    ]
                };

            }
        },
        watch: {
            startDate(val, oldVal) {
                if (val > this.endDate) {
                    this.startDate = oldVal;
                    this.$toast('开始日期不能大于结束日期');
                }
            },
            endDate(val, oldVal) {
                if (val < this.startDate) {
                    this.endDate = oldVal;
                    this.$toast('结束日期不能小于开始日期');
                }
            },
            activeChoose(val) {
                this.startDate = new Date(this.activeMap[this.activeChoose][0].replace(/-/g, "/"));
                this.endDate = new Date(this.activeMap[this.activeChoose][1].replace(/-/g, "/"));
            }
        }
    };
</script>

<style lang="stylus" scoped>
    @import '~assets/main.styl'

    >>> .van-popup {
        overflow hidden
    }

    .select {
        position relative
        background grayF
        width 100vw
        height 100vh
        box-sizing border-box
        padding 0 cellPadding
        overflow hidden
        .title {
            margin smallMargin 0
            line-height vw(20)
            color gray3
            font-size word14
        }
        .tag {
            width vw(60)
            height vw(25)
            color gray3
            background-color grayE
            text-align center
            border-radius 13px
            margin-right vw(20)
            &.active {
                background-color main-color
                color grayF
            }
        }
        .title2 {
            margin vw(20) 0 smallMargin 0
            line-height vw(20)
            color gray3
            font-size word14
            .label {
                float right
                font-size word12
                color gray9
            }
        }
        .pick {
            box-sizing border-box
            .pick-item {
                width 100%
                flex-x(space-between)
                border-bottom 1px solid grayE
                height 8vw
                margin-bottom vw(5)
                p {
                    word-vw(word14, gray6)
                }
            }
        }
        .icon {
            width vw(12)
            height vw(12)
            vertical-align: -0.15em;
            overflow: hidden;
            fill: gray6
        }
        .btn-container {
            width 100vw
            position absolute
            bottom 0
            left 0
            padding middleMargin cellPadding
            display flex
            justify-content center
            box-sizing border-box
            .btn:first-child {
                flex 0 0 auto
                secondary-hollow()
                margin 0 smallMargin
            }
            .btn:last-child {
                flex 0 0 auto
                secondary-solid()
                margin 0 smallMargin
            }
        }
    }

    >>> .van-picker__cancel {
        color gray3
    }

    >>> .van-picker__confirm {
        color gray3
    }
</style>
